<template>
  <div class="log flex flex-1 h-0"
       v-loading="loading">
    <div class="log__left flex-1 flex flex-col w-0">
      <div class="log-list flex-1 flex flex-col h-0">
        <div class="log-list__header flex justify-between items-center">
          <span class="log-list__header--title" style="font-size:16px;color: #404040;font-weight:600;">{{'WebHook API List'}}</span>
        </div>
        <div class="log-list__content flex-1  h-0"
             ref="table-wrapper">
          <el-table :data="tableListData"
                    highlight-current-row
                    row-key="id"
                    ref="table"
                    v-loading="loading"
                    @row-click="rowClick"
                    header-cell-class-name="log_list_headers">
            <el-table-column prop='entityType'
                             :label="$t('custom.connector.loginfo.api')"
                             header-align="center"
                             align="center"
                             width="150"></el-table-column>
            <el-table-column prop="createTime"
                             label="Last Callback Registration Time"
                             header-align="center"
                             align="center">
              <template slot-scope="scope">{{timeAreaFormat(scope.row.createTime)}}</template>
            </el-table-column>
            <el-table-column prop="status"
                             :label="$t('custom.connector.loginfo.status')"
                             header-align="center"
                             align="center">
              <template slot-scope="scope">
                <div class="table-status"
                     :class="statusStyle(scope.row)">{{getStatus(scope.row)}}</div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('custom.connector.loginfo.action')"
                             header-align="center"
                             align="center">
              <template slot-scope="scope">
                <div class="flex justify-center">
                  <el-tooltip :open-delay="1000"
                              content="Register">
                    <el-button type="text"
                               class="table-button"
                               :loading="scope.row.loading"
                               v-if="!(scope.row.status>=1)"
                               icon="cuifont icon_globe cursor-pointer"
                               @click.native.stop="handleManuallySync(scope.row,scope.$index)"></el-button>
                  </el-tooltip>
                </div>

              </template>

            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="log__right flex-1 flex flex-col w-0">
      <div class="log-history flex-1 flex flex-col h-0">
        <div class="log-history__header flex justify-between items-center">
          <span class="log-history__header--title" style="font-size:16px;color: #404040;font-weight:600;">{{'Callback Registration History'}}</span>
        </div>
        <div class="log-history__content flex-1 h-0"
             ref="table-wrapper">
          <el-table :data="tableDetailData"
                    ref="table"
                     v-loading="detailLoading"
                    header-cell-class-name="log_history_headers">
             <el-table-column prop="action"
                             label="Action"
                             header-align="center"
                             align="center"></el-table-column>

            <el-table-column prop="createTime"
                             label="Time"
                             header-align="center"
                             align="center">
              <template slot-scope="scope">{{ timeAreaFormat(scope.row.createTime)}}</template>
            </el-table-column>
            <el-table-column prop='elapsedTime'
                             label="Duration(s)"
                             header-align="center"
                             align="center"
                             width="180">
                             <template slot-scope="scope">
                                {{durationformat(scope.row)}}
                             </template>
                             </el-table-column>
            <el-table-column prop="status"
                             :label="$t('custom.connector.loginfo.status')"
                             header-align="center"
                             align="center">
              <template slot-scope="scope">
                <div class="table-status"
                     :class="statusHistoryStyle(scope.row)">{{getHistoryStatus(scope.row)}}</div>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="flex justify-end"
             style="padding:15px 0">
          <el-pagination :page-sizes="[10, 20, 50, 100]"
                         :current-page="pagination.page"
                         :page-size="pagination.limit"
                         :pager-count="5"
                         :total="Number(pagination.total)"
                         layout="total, sizes, prev, pager, next, jumper"
                         @size-change="sizeChange"
                         @current-change="currentChange">
          </el-pagination>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'WebHook',
  components: {

  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      loading: false,
      tableListData: [],
      tableDetailData: [],
      pagination: {
        limit: 10,
        page: 1,
        total: 0
      },
      detailLoading: false

    }
  },

  created () {
    this.getWeebHookList()
  },
  beforeDestroy () {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    rowClick (row) {
      this.getWeebHookDetailList(row)
    },
    handleManuallySync (row, index) {
      row.loading = true
      const params = {
        entityType: row.entityType
      }
      this.$interface.taskManager.postStartWebhookSync(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        row.loading = false
      })
    },
    getWeebHookList () {
      this.loading = true
      this.$interface.taskManager.getWebhookListData().then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.tableListData = res.data.map(i => ({
          ...i,
          loading: false
        }))
        this.rowClick(this.tableListData[0])
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    sizeChange (val) {
      this.pagination.page = 1
      this.pagination.limit = val
      this.getWeebHookDetailList()
    },
    currentChange (val) {
      this.pagination.page = val
      this.getWeebHookDetailList()
    },
    timeAreaFormat (time) {
      if (time) {
        return moment.tz(time, this.$store.state.user.timezoneId).format('MM/DD/YYYY HH:mm') + ' ' + moment.tz(time, this.$store.state.user.timezoneId).format('zz')
      }
      return time
    },
    getWeebHookDetailList (row) {
      this.detailLoading = true
      const params = {
        entityType: row.entityType,
        page: this.pagination.page,
        tenantId: this.$store.state.user.tenantCode,
        pageSize: this.pagination.limit
      }
      this.$interface.taskManager.getWebhookDeatilData(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.tableDetailData = res.data.records
        this.pagination.total = res.data.total || 0
      }).finally(() => {
        this.detailLoading = false
      })
    },
    statusStyle (row) {
      if (row.status >= 1) {
        return 'status_succes'
      }
      return 'status_nosucces'
    },
    getStatus (row) {
      if (row.status >= 1) {
        return 'Succeeded'
      }
      return 'Failed'
    },
    statusHistoryStyle (row) {
      if (row.status === 200) {
        return 'status_succes'
      }
      return 'status_nosucces'
    },
    getHistoryStatus (row) {
      if (row.status === 200) {
        return 'Succeeded'
      }
      return 'Failed'
    },
    durationformat (row) {
      return row.elapsedTime > 0 ? row.elapsedTime / 1000 : row.elapsedTime
    }
  }
}
</script>

<style lang="scss" scoped>
.log {
  position: relative;
  overflow: hidden;
  border-top: 1px solid #f0f0f0;

  &__left {
    padding: 24px 15px 0;
    margin-bottom: 15px;
    &--alert {
      flex-shrink: 0;
      margin-bottom: 15px;
      color: #404040;
      .cuifont {
        font-size: 13px;
      }
    }
  }
  &--panel {
    padding: 15px 0;
    height: auto !important;
  }

  &__right {
    padding: 24px 15px 0;
    border-left: 1px solid #f0f0f0;
    &-form {
      .el-form-item {
        display: flex !important;
      }
      margin-bottom: 15px;
      ::v-deep .el-form-item__label {
        color: #808080;
        text-align: left;
      }
      ::v-deep .el-form-item__content {
        color: #0050b3;
        text-decoration: underline;
      }
    }
  }
}
.status_succes {
  background: #f0f9eb;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 400;
  color: #67c23a;
  padding: 2px 8px;
}
.status_nosucces {
  background: #fef0f0;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 400;
  color: #f56c6c;
  padding: 2px 8px;
}
</style>
